<!-- Login -->
<template>
  <div class="login">
    <div class="main">
      <el-carousel height="420px">
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <img :src="item.imgsrc" alt />
        </el-carousel-item>
      </el-carousel>
      <div class="login-form">
        <h3>大神管理系统</h3>
        <el-form
          :model="userlist"
          :rules="rules"
          ref="ruleForm"
          id="of"
          status-icon
        >
          <el-form-item prop="username">
            <el-input
              v-model="userlist.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="userlist.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item class="captcha">
            <el-col :span="16">
              <el-input
                v-model="userlist.captcha"
                placeholder="验证码"
              ></el-input>
            </el-col>
            <el-col :span="6">
              <img
              class="imgstyle"
                :src="Setting.apiBaseUrl+'/admin/captcha'"
                alt=""
                ref="img"
                @click="refreshCaptcha"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="goRegister">还未账号?去注册</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goUserlist('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tools from "@/utils/tools.js";
// import axios from "axios";
import { loginApi } from "../../api/users.js";
import Setting from "@/utils/setting.js"
import { setToken } from "@/utils/auth.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //自定义验证规则
    let validateUserName = (rule, value, callback) => {
      //value 指的是表单中输入的数据
      if (value === "") {
        callback(new Error("请输入邮箱或者手机号"));
      } else {
        if (!tools.regEmail.test(value)) {
          callback(new Error("邮箱或者手机号格式不正确"));
        }
        callback();
      }
    };
    //这里存放数据
    return {
      Setting:Setting,
      userlist: {
        username: "",
        password: "",
        captcha: "",
      },
      carousel: [
        {
          id: 1,
          imgsrc: require("../../assets/c1.jpg"),
        },
        {
          id: 2,
          imgsrc: require("../../assets/c2.jpg"),
        },
        {
          id: 3,
          imgsrc: require("../../assets/c3.jpg"),
        },
        {
          id: 4,
          imgsrc: require("../../assets/c4.jpg"),
        },
      ],
      rules: {
        username: [
          {
            validator: validateUserName,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //刷新验证码
    refreshCaptcha() {
      this.$refs.img.src = this.Setting.apiBaseUrl+`/admin/captcha`;
    },
    goUserlist(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          loginApi(this.userlist).then((res) => {
            if (res.code == 200) {
              setToken(res.token, 2);
              localStorage.setItem("token",res.token)
              // setToken(this.userlist.username,2)
              localStorage.setItem("name",this.userlist.username)
              this.$router.push("/admin/main");
            }
          })
        }
      });
    },
    goRegister () {
      this.$router.push("/admin/register")
    }
  },
  mounted() {},
};
</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  // background: url(../../assets/c2.jpg) no-repeat;
  background-size: cover;
  .main {
    width: 800px;
    height: 420px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -200px;
    border-radius: 10px;
    display: flex;
    .el-carousel {
      width: 420px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-form {
      width: 400px;
      padding-top: 10px;

      h3 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: rgb(68, 68, 68);
      }
      .el-form {
        padding: 10px 20px;
        .el-form-item {
          margin-bottom: 15px;
        }
        .el-button {
          width: 100%;
        }
      }
    }
  }
  .imgstyle{
    border-radius: 4px;
    height: 40px;
    border: 1px solid #DCDFE6;
    margin-left: 5px;
  }
}
</style>